<template>
	<view class="">
		<view class="flex-ju-b con" :style="{paddingTop:shh+5+'px'}">
			<uni-icons @click="back()" type="left" size="22" color="#000"></uni-icons>
			<view class="flex-a-i">
				<image @click="navto('/pages/search')" mode="widthFix" class="flex image width40" src="/static/sou.png"></image>
				<view @click="navto('settings?type=1')" class="flex-a-i size24 borderECEDEE color666 ml30 ra20 pg5-20">
					设置
				</view>
			</view>
			<view></view>
		</view>
		
			<swiper previous-margin="20px" next-margin="20px" class="swiperc">
					<swiper-item v-for="(item,index) in info.reviewWordDto" :key="index">
					<view style="width: 95%;margin: auto;margin-top:20rpx;">
							<scroll-view scroll-y class=" bgfff ra50"  >
							<view v-if="info.reviewWordDto.length" @click="tapdisplay" class=" pg30 swipers" >
									<view class="flex-ju-b ">
										<view>剩余{{item.wordCount}}</view>
										<view class="flex-a-i"></view>
									</view>
									<view  class="flex-ju-c size72 bold mt50">{{item.word}}
									</view>
									
									<view class="flex-ju-c color666 size24 mt20">
										<view @click.stop="voice(item.ukUrl)" class="flex-a-i">{{item.ukPhonetic}} <image mode="widthFix" src="/static/yuyin.png" class="image flex width36"></image></view>
										<view @click.stop="voice(item.usUrl)" class="ml50 flex-a-i">{{item.usPhonetic}} <image mode="widthFix" src="/static/yuyin.png" class="image flex width36"></image></view>
									</view>
									
									<view v-if="info.isCard" class="flex-ju-c mt30">
										<image  class="flex image wh340-450 ra20" :src="item.card"></image>
									</view>
									<view v-else class="width600 mt80 ">
										<view class="flex-ju-c size24 mt30 color666">
											尝试回想释义 
										</view>
										<view class="flex-ju-c size24  color666">
											点击空白处查看词根图片
										</view>
									</view>
									
									<template v-if="info.isCard||info.isSentence">
										<view v-if="info.isSentence" v-for="(items,a) in item.exampleInfoDos" :key="a">
											<view class="flex mt20">
												<view class="bold">例句</view>
												<view class="size24 color666 ml10 flex1 mt8" >
												  {{items.chinaExample}}
												</view>
											</view>
											<view class="flex mt10">
												<view  class="flex mr10">
													<image @click.stop="voice(items.exampleAudioUrl)" mode="widthFix" src="/static/yuyin.png" class="image flex mt10 width36"></image>
												</view>
												<view>
													<mp-html :content="items.englishExample"></mp-html>
												</view>
											</view>
										</view>
										<view v-else class="width600 mt30 size28">
											<view class="flex-ju-c size24 mt30 color666">
												仍未想起
											</view>
											<view class="flex-ju-c size24  color666">
												点击空白处查看例句
											</view>
										</view>
									</template>
							</view>
							<view v-else class="flex-ju-c bgf9f9f9">已复习完成</view>
							</scroll-view>
							<view v-if="info.reviewWordDto.length" class="flex-ju-b width85vw posiab bottom0 bot mt30" :style="{paddingBottom:bhh+'px'}">
								<view @click="tapdisplay" class="wh240-120 ra20 colorfff flex-ju-c size40 bg000">不认识</view>
								<view @click="behead" class="wh130-130 ra130 flex-ju-c bgfff">
									<image mode="widthFix" class="flex image width130" src="/static/zan.png"></image>
								</view>
								<view @click="toknow" class="wh240-120 ra20 colorfff flex-ju-c size40 bgFD2F55">认识</view>
							</view>
					</view>
				</swiper-item>
			</swiper>
			
			<!-- <uni-popup ref="cang" type="bottom" background-color="#fff" border-radius="20px 20px 0px 0" >
				<view class="con size28">
					<view class="flex-ju-c border-bECEDEE height100">隐藏讲解</view>
					<view class="flex-ju-c border-bECEDEE height100">隐藏单词</view>
					<view class="flex-ju-c border-bECEDEE height100">完整显示</view>
					<view @click="$refs.cang.close()" class="flex-ju-c border-bECEDEE height100 color666">取消</view>
				</view>
			</uni-popup> -->
			
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				info:{}
			}
		},
		onLoad() {
			this.getinfo()
		},
		mounted() {
			
		},
		methods: {
			toknow(){
				uni.navigateTo({
					url:"words_detail?id="+this.info.reviewWordDto.wordId
				})
			},
			handleTouchStart(event) {
			      // 记录触摸开始的X坐标
			      this.startX = event.touches[0].clientX;
			    },
			    handleTouchEnd(event) {
			      // 记录触摸结束的X坐标
			      this.endX = event.changedTouches[0].clientX;
			      this.detectSwipe();
			    },
			    detectSwipe() {
			      const diffX = this.endX - this.startX;
			      const threshold = 50; // 滑动判定阈值
			
			      if (Math.abs(diffX) < threshold) {
			        // 滑动距离不足，不判定为有效滑动
			        // this.swipeDirection = '未检测到有效滑动';
			        return;
			      }
			
			      if (diffX > 0) {
			        // this.swipeDirection = '右滑';
			        this.onSwipeRight(); // 触发右滑回调
			      } else {
			        // this.swipeDirection = '左滑';
			        this.onSwipeLeft();  // 触发左滑回调
			      }
			    },
			    onSwipeLeft() {
			      // 左滑后的处理逻辑，例如切换至下一题:ml-citation{ref="3" data="citationList"}
			     
				  this.noknow()
			      console.log('检测到左滑手势');
			    },
			    onSwipeRight() {
			      // 右滑后的处理逻辑，例如切换至上一题:ml-citation{ref="3" data="citationList"} 或返回上一页:ml-citation{ref="2" data="citationList"}
			     
				  this.know()
			      console.log('检测到右滑手势');
			    },
			
			
			
			getinfo(){
				this.http('/api/review/reviewInfo',{
					reviewType:1
				},'post').then(res=>{
					if(res.data.reviewWordDto){
						res.data.reviewWordDto.map(items=>{
							items.exampleInfoDos.map(item=>{
								item.englishExample = this.wreplace(items.word,item.englishExample)
							})
						})
						
						// res.data.reviewWordDto.exampleInfoDos.map(item=>{
						// 	item.englishExample = this.wreplace(res.data.reviewWordDto.word,item.englishExample)
						// })
						
						this.info=res.data
					}else{
						uni.redirectTo({
							url:"fuxisuu"
						})
					}
					
				})
			},
			tapdisplay(){
				if(this.info.isCard&&this.info.isSentence){
					uni.navigateTo({
						url:"words_detail?id="+this.info.reviewWordDto.wordId
					})
					return
				}
				if(this.info.isCard){
					this.info.isSentence=1
				}else{
					this.info.isCard=1
				}
			},
			adduserReview(reviewStatus){
				this.http('/api/userReview/add',{
					entryId:this.info.reviewWordDto.wordId,
					reviewType:1,
					reviewStatus
				},'post').then(res=>{
					this.getinfo()
				})
			},
			noknow(){
				
				this.adduserReview(3)
			},
			know(){
				this.adduserReview(1)
			},
			behead(){
				this.adduserReview(2)
			},
		}
	} 
</script>

<style>
	
	.swiperc{
		height:calc(100vh - 150rpx);
	}
	
	.swipers{
		/* width: 80vw; */
		height:calc(100vh - 380rpx);
	}
		page{
			background: #f9f9f9;
		}

</style>
